<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s01-介绍</title>
		<!-- 1 安装 -->
		<!-- 1.1 本地安装 -->
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 1.2 开发环境版本，包含了有帮助的命令行警告 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script> -->
		<!-- 1.3 生产环境版本，优化了尺寸和速度 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
	</head>
	<body>
		<!-- 2.1 -->
		<div id="app1">
			{{ message }}
		</div>
		<hr />
		<!-- 2.2 -->
		<div id="app2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<hr />
		<div id="app3">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<hr />
		<div id="app4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<hr />
		<div id="app5">
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">reverse msg</button>
		</div>
		<hr />
		<div id="app6">
			<p>{{message}}</p>
			<input v-model="message" />
		</div>
		<hr />
		todoList1: 
		<ol id="app7">
			<!-- 创建一个 todo-item 组件的实例 -->
			<todo-item></todo-item>
		</ol>
		<hr />
		todoList2:
		<ol id="app8">
			<!--
			  现在我们为每个 todo-item 提供 todo 对象
			  todo 对象是变量，即其内容可以是动态的。
			  我们也需要为每个组件提供一个“key”，稍后再
			  作详细解释。
			-->
			<todo-item2
			  v-for="item in todoList"
			  v-bind:todo="item"
			  v-bind:key="item.id"></todo-item2>
		</ol>
		<hr />
		<script type="text/javascript">
			// 2 声明式渲染
			// 2.1 文本插值
			var ap1 = new Vue({
				el: '#app1',
				data: {
					message: 'Hello Vue!'
				}
			})
			
			// 2.2 绑定元素 attribute
			var ap2 = new Vue({
				el: '#app2', 
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})
			
			var ap3 = new Vue({
				el: '#app3',
				data: {
					seen: true
				}
			})
			
			var ap4 = new Vue({
				el: '#app4',
				data: {
					todos: [
						{ text: '看书' }, 
						{ text: '练字' },
						{ text: '练气' }
					]
				}
			})
			
			var ap5 = new Vue({
				el: '#app5',
				data: {
					message: 'hello vue.js'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join("")
					}
				}
			})
			
			var ap6 = new Vue({
				el: '#app6',
				data: {
					message: 'hello vue!'
				}
			})
			
			// 定义名为 todo-item 的新组件
			Vue.component('todo-item', {
				template: '<li>this is a todo item</li>'
			})
			
			// 注意：必须先定义组件，再定义使用到该组件的 Vue 实例！
			var ap7 = new Vue({
				el: '#app7'
			})
			
			Vue.component('todo-item2', {
				// todo-item2 组件现在接受一个 "prop"，类似于一个自定义 attribute。这个 prop 名为 todo
				props: ['todo'],
				template: '<li>{{todo.text}}</li>'
			})
			
			var ap8 = new Vue({
				el: '#app8',
				data: {
					todoList: [
						{id: 1, text: 'reading'},
						{id: 2, text: 'painting'},
						{id: 3, text: 'writing'}
					]
				}
			})
			
		</script>
	</body>
</html>
